import * as THREE from "three";

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const width = 600;
const height = 400;
const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); // 透视相机

camera.position.set(300, 300, 300);
camera.lookAt(0, 0, 0);
// scene.add(camera);

var geometry = new THREE.BoxGeometry(50, 50, 50);
var box = new THREE.BoxGeometry(5, 200, 5); //为变形目标提供数据
geometry.morphAttributes.position = [];
// 将长方体的位置数据赋值给geometry，这样geometry的各个顶点就能从原本的position变形到目标的position
geometry.morphAttributes.position[0] = box.attributes.position;
var material = new THREE.MeshLambertMaterial({
  color: 0x0000ff,
  flatShading: true
}); //材质对象
var mesh = new THREE.Mesh(geometry, material); //网格模型对象
scene.add(mesh); //网格模型添加到场景中
//会照亮场景里的全部物体（氛围灯），前提是物体是可以接受灯光的，这种灯是无方向的，即不会有阴影。
const ambient2 = new THREE.AmbientLight(0xffffff, 0.4);
const light2 = new THREE.PointLight(0xffffff, 1); //点光源，color:灯光颜色，intensity:光照强度
scene.add(ambient2);
light2.position.set(200, 300, 400);
scene.add(light2);

mesh.morphTargetInfluences[0] = 1;
// 创建一个剪辑clip对象，命名"default"，持续时间20秒
var track = new THREE.KeyframeTrack(
  ".morphTargetInfluences[0]",
  [0, 10, 20],
  [0, 1, 0]
);
console.log(track);
var clip = new THREE.AnimationClip("default", 20, [track]);
console.log(clip);
var mixer = new THREE.AnimationMixer(mesh); //创建混合器
var AnimationAction = mixer.clipAction(clip); //返回动画操作对象
AnimationAction.timeScale = 5; //默认1，可以调节播放速度
// AnimationAction.loop = THREE.LoopOnce; //不循环播放
// AnimationAction.clampWhenFinished=true;//暂停在最后一帧播放的状态
AnimationAction.play(); //开始播放

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);

// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);
// 创建一个时钟对象Clock
var clock = new THREE.Clock();
// 渲染函数
function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧

  //clock.getDelta()方法获得两帧的时间间隔
  // 更新混合器相关的时间
  mixer.update(clock.getDelta());
}
render();
